<template>
  <div class="main-box">
    <div class="title">错误信息统计</div>
    <div class="select">
      <div>数据时间</div>
      <el-date-picker
        style="margin-left: 20px"
        v-model="time"
        type="date"
        placeholder="选择日期"
      >
      </el-date-picker>
      <el-button
        style="margin-left: 20px"
        icon="el-icon-search"
        class="Btn"
        :loading="loading"
        @click="search"
        >查询</el-button
      >
    </div>
    <div class="echart">
      <div class="echartItem" id="chart1"></div>

      <div class="echartItem" id="chart2"></div>

      <div class="echartItem" id="chart3"></div>
    </div>
  </div>
</template>


<script>
import * as echarts from "echarts";
export default {
  name: "ErrorInfo",
  props: {},
  components: {},
  data() {
    return {
      time: null,
      loading: false,
      chartInstance: null,
      chartInstance2: null,
      chartInstance3: null,
    };
  },
  methods: {
    search() {
      this.loading = true;
    },
    getCharts(dom, text, data) {
      let option = {
        title: {
          show: true,
          // text: "批次合同错误信息统计", //主标题文本
          text: text,
          textStyle: {
            color: " #249087", //'red'，字体颜色
            fontStyle: "normal", //'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格
            fontWeight: "normal", //'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细
            fontFamily: "sans-serif", //'sans-serif' | 'serif' | 'monospace' | 'Arial' | 'Courier New'
            // 'Microsoft YaHei'(微软雅黑) ，文字字体
            fontSize: 18, //字体大小
            lineHeight: 18, //字体行高
            fontWeight: 600,
          },
          textAlign: "auto", //整体（包括 text 和 subtext）的水平对齐
          textVerticalAlign: "auto", //整体（包括 text 和 subtext）的垂直对齐
          padding: 0, //[5,10] | [ 5,6, 7, 8] ,标题内边距
          left: "20px", //'5' | '5%'，title 组件离容器左侧的距离
          right: "auto", //'title 组件离容器右侧的距离
          top: "10px", //title 组件离容器上侧的距离
          bottom: "auto", //title 组件离容器下侧的距离
        },
        backgroundColor: "white",
        tooltip: {
          show: true,
          trigger: "item",
          //{a}(系列名)，{b}(数据项名),{c}(数值),{d}(百分比)
          formatter: "{a} <br/>{b} : {c}",
          backgroundColor: "rgba(1, 13, 19, 0.5)",
          borderWidth: 0,
          textStyle: {
            color: "rgba(212, 232, 254, 1)",
            // fontSize: fontChart(0.24),
          },
        },

        legend: {
          orient: "vertical",
          right: "5%",
          top: "40%",
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 15,
          textStyle: {
            fontSize: 14,
            color: "#000",
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "70%",
            center: ["40%", "50%"],
            data: data,
            label: {
              normal: {
                formatter: ["{b|{b}}", "{c|{c}}"].join("\n"),
                rich: {
                  c: {
                    color: "inherit",
                    fontSize: 20,
                    fontWeight: "bold",
                    lineHeight: 5,
                  },
                  b: {
                    fontSize: 15,
                    height: 40,
                  },
                },
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      dom.setOption(option);
    },
  },
  mounted() {
    console.log(echarts, "0000");
    this.chartInstance = echarts.init(document.getElementById("chart1"));
    this.chartInstance2 = echarts.init(document.getElementById("chart2"));
    this.chartInstance3 = echarts.init(document.getElementById("chart3"));
    let data = [
      { value: 35, name: "中标结果数量不一致" },
      { value: 30, name: "ERP创建订单失败" },
      { value: 24, name: "ERP传输异常" },
      { value: 14, name: "签章位置错误" },
    ];
    let data2 = [
      { value: 35, name: "中标结果数量不一致" },
      { value: 65, name: "ERP创建订单失败" },
      { value: 14, name: "ERP传输异常" },
      { value: 49, name: "签章位置错误" },
    ];
    let data3 = [
      { value: 43, name: "订单信息检查错误" },
      { value: 24, name: "ECP订单检查错误" },
      { value: 64, name: "签章文件检查错误" },
    ];
    this.getCharts(this.chartInstance, "批次合同", data);
    this.getCharts(this.chartInstance2, "框架合同", data2);
    this.getCharts(this.chartInstance3, "供货单", data3);

    this.chartInstance.setOption(option2);
    this.chartInstance2.setOption(option2);
    this.chartInstance3.setOption(option2);

    window.onresize = () => {
      this.chartInstance.resize();
      this.chartInstance2.resize();
      this.chartInstance3.resize();
    };
  },
};
</script>


<style lang="scss" scoped>
.main-box {
  padding: 10px;
  .title {
    font-size: 22px;
    font-weight: bold;
    color: #249087;
  }
  .select {
    // width: 100%;
    // height: 100px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    .Btn {
      color: white;
      background-color: #249087;
    }
  }
  .echart {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    .echartItem {
      width: calc((100% - 20px) / 2);
      height: 320px;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    }
  }
}
</style>
